<%@ page contentType="text/html; charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="../style/header.css"/>
<%@ include file="../common/header.jsp" %>
<h1>我的宠物列表</h1>

<div class="pet-container">
    <div class="add-pet-btn-container">
        <a href="../Pet/addPet.jsp" class="add-pet-btn">添加宠物</a>
    </div>
    <c:choose>
        <%-- 检查是否有宠物数据 --%>
        <c:when test="${not empty pet}">
            <table class="pet-table">
                <thead>
                <tr>
                    <th>头像</th>
                    <th>名字</th>
                    <th>种类</th>
                    <th>生日</th>
                    <th>性别</th>
                    <th>公开状态</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                    <%-- 使用JSTL遍历宠物列表 --%>
                <c:forEach items="${pet}" var="petItem">
                    <tr>
                        <td class="avatar-cell">
                            <c:choose>
                                <c:when test="${not empty petItem.avatarUrl}">
                                    <img src="${petItem.avatarUrl}" alt="宠物头像" class="pet-avatar">
                                </c:when>
                                <c:otherwise>
                                    <img src="../static/Pet.png" alt="默认头像" class="pet-avatar">
                                </c:otherwise>
                            </c:choose>
                        </td>
                        <td>
                            <c:out value="${not empty petItem.name ? petItem.name : '未命名'}" />
                        </td>
                        <td>
                            <c:out value="${not empty petItem.species ? petItem.species : '未知种类'}" />
                        </td>
                        <td>
                            <c:choose>
                                <c:when test="${not empty petItem.birthday}">
                                    <fmt:formatDate value="${petItem.birthday}" pattern="yyyy-MM-dd" />
                                </c:when>
                                <c:otherwise>
                                    <span class="text-muted">未知</span>
                                </c:otherwise>
                            </c:choose>
                        </td>
                        <td>
                            <c:choose>
                                <c:when test="${petItem.gender == 1}">
                                    <span class="gender-icon male">♂ 雄性</span>
                                </c:when>
                                <c:when test="${petItem.gender == 2}">
                                    <span class="gender-icon female">♀ 雌性</span>
                                </c:when>
                                <c:otherwise>
                                    <span class="text-muted">未知</span>
                                </c:otherwise>
                            </c:choose>
                        </td>
                        <td>
                            <c:choose>
                                <c:when test="${petItem.isPublic == 1}">
                                    <span style="color: green;">公开</span>
                                </c:when>
                                <c:otherwise>
                                    <span style="color: red;">私有</span>
                                </c:otherwise>
                            </c:choose>
                        </td>
                        <td>
                            <fmt:formatDate value="${petItem.createTime}" pattern="yyyy-MM-dd HH:mm" />
                        </td>
                        <td>
                                <a href="../Pet/updatePet.jsp?id=${petItem.id}" class="btn btn-edit">修改宠物</a>

                                <form action="deletePet.pet" method="post" onsubmit="return confirm('确定要删除该宠物吗？')">
                                    <input type="hidden" name="id" value="${petItem.id}" />
                                    <button type="submit" class="btn btn-delete">删除</button>
                                </form>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </c:when>
        <c:otherwise>
            <div class="no-pets">
                <p style="font-size: 18px; color: #666;">您还没有添加任何宠物</p>
            </div>
        </c:otherwise>
    </c:choose>
</div>
</body>
<style>
    h1 {
        color: #333;
        text-align: center;
        margin-bottom: 30px;
    }
    .pet-container {
        width: 90%;
        margin: 0 auto;
        overflow-x: auto;
    }
    .pet-table {
        width: 100%;
        border: 2px solid #ddd;
        border-collapse: collapse;
        margin-top: 20px;
        box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    }
    .pet-table th, .pet-table td {
        border: 1px solid #ddd;
        padding: 12px 15px;
        text-align: left;
    }
    .pet-table th {
        background-color: #f8f9fa;
        font-weight: bold;
        color: #333;
    }
    .pet-table tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    .pet-table tr:hover {
        background-color: #f1f1f1;
    }
    .avatar-cell {
        width: 100px;
        text-align: center;
    }
    .pet-avatar {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid #ddd;
        display: block;
        margin: 0 auto;
        max-width: 100%;
        max-height: 100%;
    }
    .gender-icon {
        font-size: 18px;
        margin-right: 5px;
    }
    .male {
        color: #1e88e5;
    }
    .female {
        color: #e91e63;
    }
    .no-pets {
        text-align: center;
        padding: 40px;
        background-color: #f8f9fa;
        border-radius: 5px;
        margin-top: 30px;
    }
    .add-pet-btn {
        display: inline-block;
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.3s;
    }
    .add-pet-btn:hover {
        background-color: #45a049;
    }
    .text-muted {
        color: #6c757d;
        font-style: italic;
    }
    .btn {
        padding: 6px 12px;
        margin-right: 8px;
        text-decoration: none;
        border-radius: 4px;
        font-size: 14px;
    }
    .btn-edit {
        background-color: #2196F3;
        color: white;
    }
    .btn-delete {
        background-color: #f44336;
        color: white;
    }
    .btn-edit:hover {
        background-color: #1976D2;
    }
    .btn-delete:hover {
        background-color: #d32f2f;
    }
</style>
</html>
